navigation-rail {
  display: none;
  outline: 0;

  @include media-query('lg') {
    border-right: 1px solid var(--color-hairline);
    display: block;
    // width: px-to-rem(72px);
  }
}

.navigation-rail__links {
  @include media-query('lg') {
    position: sticky;
    top: 0;
  }
}

.navigation-rail__link {
  @extend %navigation__link;
  @include font-setup(14px, 28px);
  color: var(--color-secondary-text);
  padding-bottom: px-to-rem(12px);
  padding-top: px-to-rem(12px);

  @include media-query('lg') {
    flex-direction: column;
    padding: 0;
    position: relative;

    .navigation-rail__icon {
      position: static;
    }

    + .navigation-rail__link {
      --flow-space: 1.5rem;
      margin-top: var(--flow-space);
    }
  }

  &:hover {
    @include media-query('lg') {
      background: transparent;
      // Define an explicit z-index so we can position the ::before
      // element behind it.
      z-index: 0;

      // stylelint-disable max-nesting-depth
      &::before {
        $hover-size: 40px;
        background: var(--color-side-nav-hover);
        border-radius: 50%;
        content: '';
        height: $hover-size;
        position: absolute;
        top: -(($hover-size - 28px) / 2); // 28px is line-height
        width: $hover-size;
        z-index: -1;
      }
    }
  }

  &[data-state='active'] {
    color: var(--color-side-nav-active);

    @include media-query('lg') {
      background: transparent;
    }
  }

  > :last-child {
    margin-left: 4rem;

    @include media-query('lg') {
      margin-left: 0;
    }
  }
}

.navigation-rail__icon {
  @extend %navigation__icon;

  width: 4rem;
}
